<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="change('demo1')">demo1</button>
        <button @click="change('demo2')">demo2</button>
        <button @click="change('demo3')">demo3</button>
        <keep-alive :max="3">
            <component :is="componentId"></component>
        </keep-alive>
    </div>
</body>
<script>
    Vue.component('demo1', {
        template: `
        <div>组件1</div>
        `,
        destroyed() {
            console.log('demo1销毁了');
        },
    })
    Vue.component('demo2', {
        template: `
        <div>组件2</div>
        `,
        destroyed() {
            console.log('demo2销毁了');

        },
    })
    Vue.component('demo3', {
        template: `
        <div>组件3</div>
        `,
        destroyed() {
            console.log('demo3销毁了');

        },
    })
    let vm = new Vue({
        el: '#app',
        data: {
            componentId: "demo1"
        },
        methods: {
            change(id) {
                this.componentId = id
            }
        },

    })
</script>

</html>